<script setup>
/**
 *
 */
import {
  ref,
  reactive,
  onMounted,
  computed,
  watch,
  nextTick,
  defineProps,
} from "vue";

// 组件
// 颜色选取
import ColorPicker from "colorpicker-v3";
import "colorpicker-v3/style.css";

// 枚举数据
import {
  alignmentArr,
  fontImgSrc,
  getTextWidthUsingCanvas,
} from "../../utools/index.js";

// icon
import {
  CaretDownOutlined,
  PlusOutlined,
  MinusOutlined,
  CheckOutlined,
  CaretUpOutlined,
  QuestionCircleOutlined
} from "@ant-design/icons-vue";

import request from "@/common/utils/request";

import { useStore } from "vuex";
const store = useStore();

const props = defineProps({
  state: {
    type: Object,
  },
});

// 默认花字列表
const FlowerDefaultArr = computed(() => {
  return store.state.videoMixCut.FlowerDefaultArr;
});

// 阿里云默认花字
const FlowerDefault_Aly = computed(() => {
  return store.state.videoMixCut.FlowerDefault_Aly;
});

// 花字是否随机
const isRandom = computed({
  get() {
    return store.state.videoMixCut.Global_tts_config.flower_random_config.isRandom
  },
  set(val) {
    store.state.videoMixCut.Global_tts_config.flower_random_config.isRandom = val
  }
})

// 系统花字 还是 ali花字配置
const flower_type = computed({
  get() {
    return store.state.videoMixCut.Global_tts_config.flower_random_config.flower_type
  },
  set(val) {
    store.state.videoMixCut.Global_tts_config.flower_random_config.flower_type = val
  }
})

// 当前编辑的类型
const configs_type = computed(() => {
  return store.state.videoMixCut.Global_tts_config.configs_type;
});

// 当前编辑的 全局tts的id
const globalTtsCurrent_id = computed(() => {
  return store.state.videoMixCut.globalTtsCurrent_id;
});

// 所有的全局字幕数据
const Global_tts_config_configs = computed(() => {
  return store.state.videoMixCut.Global_tts_config;
});

const Global_tts_config = computed(() => {
  if (configs_type.value == "text") {
    // debugger
    return (
      store.state.videoMixCut.Global_tts_config.configs.filter(
        (ele) => ele.tab_id == "text"
      )?.[0]?.subtitle[0] || {}
    );
  } else {
    return (
      store.state.videoMixCut.Global_tts_config.configs.filter(
        (ele) => ele.tab_id == "audio"
      )?.[0]?.subtitle[0] || {}
    );
  }
});

// 字体列表
const fontList = computed(() => {
  return store.state.videoMixCut.fontList;
});

// 描边设置折叠面板
const outline = ref("");

// 背景色折叠面板开关
const collapseKeyBgc = ref("");

// 新花字列表
const FlowerArr = computed(() => store.state.videoMixCut.FlowerArr);
// 阿里云花字列表
const FlowerAliArr = computed(() => store.state.videoMixCut.FlowerAliArr);

// 获得对应项的字体样式
const getStyle = (item) => {
  // debugger
  return {
    color: item.fontcolor,
    "-webkit-text-stroke": item.bordercolor ? `1px ${item.bordercolor}` : "",
  };
};

// 数据保存到仓库
const setStore = () => {
  // debugger;
  store.commit(
    "videoMixCut/MODIFY_GLOBALSUBTITLES_DATA",
    Global_tts_config.value
  );
};
// 字幕设置是否开启
const showSubtitle = computed({
  get() {
    if (configs_type.value == "text") {
      const target = store.state.videoMixCut.Global_tts_config.configs.filter(
        (ele) => ele.tab_id == "text"
      )?.[0];
      return target.showSubtitle;
    } else {
      const target = store.state.videoMixCut.Global_tts_config.configs.filter(
        (ele) => ele.tab_id == "audio"
      )?.[0];
      return target.showSubtitle;
    }
  },
  set(val) {
    store.commit("videoMixCut/MODIFY_SHOW_GLOBALSUBTITLE", val);
  },
});

// 高亮的花字选项
// 选择花字的名称
const activeFlowerName = computed({
  get() {
    let arr = flower_type.value == 'effectColor' ? FlowerAliArr.value : FlowerArr.value
    const findTarget = arr.find(
      (itme) => itme.id == Global_tts_config.value?.preset_styles_config?.id
    );
    if (!!findTarget) {
      console.log(findTarget,'找到花字');
      return findTarget.id;
      // return findTarget.name;
    } else {
      return "";
    }
  },
});

// 修改字体大小
const font_size = computed({
  get() {
    return Global_tts_config.value?.font_size;
  },
  set(val) {
    if (val <= 0) {
      Global_tts_config.value.font_size = 1;
    } else if (val >= 999) {
      Global_tts_config.value.font_size = 999;
    } else {
      Global_tts_config.value.font_size = val;
    }
    setStore(Global_tts_config.value);
    nextTick(() => {
      changeAllX();
    });
  },
});

// 修改字体边框粗细
const borderw = computed({
  get() {
    return Global_tts_config.value?.preset_styles_config?.borderw || 0;
  },
  set(val) {
    Global_tts_config.value.preset_styles_config.borderw = val;
    console.log("修改字体大小123123123123");
    setStore(Global_tts_config.value);
  },
});

// 修改透明度
const box_color_alpha = computed({
  get() {
    return Global_tts_config.value?.preset_styles_config?.box_color_alpha || 0;
  },
  set(val) {
    Global_tts_config.value.preset_styles_config.box_color_alpha = val;
    setStore(Global_tts_config.value);
  },
});

// 修改盒子边框粗细
const boxborderw = computed({
  get() {
    return Global_tts_config.value?.preset_styles_config?.boxborderw || 0;
  },
  set(val) {
    Global_tts_config.value.preset_styles_config.boxborderw = val;
    openBox();
    setStore(Global_tts_config.value);
  },
});

// 修改盒子边框圆角
const boxradius = computed({
  get() {
    return Global_tts_config.value?.preset_styles_config?.boxradius || 0;
  },
  set(val) {
    Global_tts_config.value.preset_styles_config.boxradius = val;
    setStore(Global_tts_config.value);
  },
});

// 其余状态管理
const restsState = ref({
  openType: "", // 打开的取色类型(字体或背景色)
  alignmentType: {
    type: "left",
    icon: "icon-zuoduiqi",
    id: 1,
  }, // 对齐方式
});

const alignment = computed({
  get() {
    return Global_tts_config.value?.alignment;
  },
  set(val) {
    const targetItem = alignmentArr.find((item) => item.type == val);
    restsState.value.alignmentType.icon = targetItem.icon;
    restsState.value.alignmentType.type = targetItem.type;
    restsState.value.alignmentType.id = targetItem.id;
    Global_tts_config.value.alignment = val;
    setStore(Global_tts_config.value);
  },
});

onMounted(() => {
  if (Global_tts_config.value.preset_styles_config.type == 0) {
    // 关闭所有的折叠面板
    collapseKeyBgc.value = "";
    outline.value = "";
  } else {
    // 开启和关闭对应的折叠面板
    if (
      Global_tts_config.value.preset_styles_config.boxborderw &&
      Global_tts_config.value.preset_styles_config.boxcolor
    ) {
      collapseKeyBgc.value = "1";
      outline.value = "";
    } else {
      collapseKeyBgc.value = "";
      outline.value = "1";
    }
  }
  alignment.value = Global_tts_config.value?.alignment;

});
// 折叠或展开
const isFlod = ref(false);
const foldingPanel = () => {
  isFlod.value = !isFlod.value;
};

// 选择对齐方式
const selectAlignmentPop = (item) => {
  alignment.value = item.type;
};

// 选择字体
const selectFontPop = ref(false);
// 返回用户选择的 或第一个

// 返回用户选择的 或第一个
const selectFontcomputed = computed({
  get() {
    const find = fontList.value.find(
      (ele) => ele.font_family == Global_tts_config.value.font_family
    );
    return find;
  },
  set(id) {
    const find = fontList.value.find((ele) => ele.id == id);
    Global_tts_config.value.font_family = find.font_family;
    Global_tts_config.value.font_name = find.name;
    Global_tts_config.value.font_url = find.material_url;
    Global_tts_config.value.font_style = find.font_style;
    Global_tts_config.value.font_path = find.material_path;

    setStore(Global_tts_config.value);
  },
});

// 清空花字配置
const clear_tts_config = () =>{
    Global_tts_config.value.preset_styles_config = {
        type: 0,
        fontcolor: "",
        bordercolor: "",
        borderw: "",
        boxcolor: "",
        box_color_alpha: "",
        boxborderw: "",
        boxradius: "",
        id: "",
        box: 0,
      };
      Global_tts_config.value.bg_color = "";
      Global_tts_config.value.color = "#FFFFFF";
      // 关闭所有的折叠面板
      collapseKeyBgc.value = "";
      outline.value = "";
  }

// 选择花字
const selectFontStyle = (item) => {
  console.log(item, "切换花字");

  if (item !== "") {

    // 开启随机 与当前单选的相同,  或者在随机花字中, 则清空当前单选的文字
    if(isRandom.value && (Global_tts_config.value.preset_styles_config.id == item.id
      || Global_tts_config_configs.value.flower_random_config.flower_config_ids.includes(item.id))) {
        clear_tts_config()
    } else {
    if (flower_type.value == 'effectColor') {
      clear_tts_config()
      Global_tts_config.value.preset_styles_config.id = item.id;
      Global_tts_config.value.flower_id = item.id;
    } else {      
      Global_tts_config.value.flower_id = ''
      Global_tts_config.value.preset_styles_config = {
        type: 1,
        fontcolor: item.fontcolor,
        bordercolor: item.bordercolor,
        borderw: item.borderw,
        boxcolor: item.boxcolor,
        box_color_alpha: item.box_color_alpha,
        boxborderw: item.boxborderw,
        boxradius: item.boxradius,
        id: item.id,
        box: item.boxborderw && item.boxcolor ? 1 : 0,
      };
      // 同步修改背景色
      Global_tts_config.value.bg_color = item.boxcolor;
      // 同步修改字体颜色
      Global_tts_config.value.color = item.fontcolor;
      // 开启和关闭对应的折叠面板
      // debugger
      if (item.boxborderw && item.boxcolor) {
        collapseKeyBgc.value = "1";
        outline.value = "";
      } else {
        collapseKeyBgc.value = "";
        outline.value = "1";
      }
    }
    }
    } else {
      clear_tts_config()
    }
    setStore(Global_tts_config.value);

  if (item != '' && isRandom.value) {
   const findIndex =  Global_tts_config_configs.value.flower_random_config.flower_config_ids.findIndex(i => i == item.id)
   // 没有此项数据, 添加
    if (findIndex == -1) {
      Global_tts_config_configs.value.flower_random_config.flower_config_ids.push(item?.id || item?.flower_id)
    } else {
      // 删除
      Global_tts_config_configs.value.flower_random_config.flower_config_ids.splice(findIndex, 1)
    }
  } else if (item == '') {
    Global_tts_config_configs.value.flower_random_config.flower_config_ids = []
  }

  console.log(Global_tts_config_configs.value,'添加一项之后的数据');
  
    // 修改数据之后 重新初始化数据
    store.commit(
    "videoMixCut/INIT_GLOBALTTSCONFIG_DATA",
    Global_tts_config_configs.value
  );
};

// 检测是否开启随机, 如果开启随机 则等于开启了 多选模式
const getActiveFn = (item) => {
  if (!isRandom.value) return false
  const findIndex =  Global_tts_config_configs.value.flower_random_config.flower_config_ids.findIndex(i => i == item.id)
  console.log(findIndex,'高亮找到的项');
  
  return typeof findIndex == 'number' && findIndex != -1
}

// 打开拾色器弹窗
const colorPickerClick = (type, ev) => {
  restsState.value.openType = type;
  const target = ev.target;
  // 获取元素的位置信息，getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
  const rect = target.getBoundingClientRect();
  // 计算元素右侧边缘到视口左侧的距离
  const dom = document.querySelector(".zs-color-picker-btn-color");
  dom.click();

  // 获取视口的宽度
  const viewportWidth = window.innerWidth;

  // 计算元素距离屏幕右侧的距离
  const rightDistanceToViewportLeft = rect.right;
  const rightDistanceToViewportRight = +(
    viewportWidth - rightDistanceToViewportLeft
  ).toFixed(0);
  const top = (rect.top + 30).toFixed(0);
  // 修改弹窗的位置为当前点击元素的位置下方
  const pickerDom = document.querySelector(".zs-color-picker-panel");
  pickerDom.style.position = "fixed";
  pickerDom.style.top = top + "px";
  pickerDom.style.right = rightDistanceToViewportRight + "px";
};

// 取色器选择颜色
const colorChange = (e) => {
  if (restsState.value.openType == "font") {
    Global_tts_config.value.color = e.hex;
    if (Global_tts_config.value.preset_styles_config.type != 0) {
      Global_tts_config.value.preset_styles_config.fontcolor = e.hex;
    }
  } else if (restsState.value.openType == "bgc") {
    Global_tts_config.value.bg_color = e.hex;
    if (Global_tts_config.value.preset_styles_config.type != 0) {
      Global_tts_config.value.preset_styles_config.boxcolor = e.hex;
      // 如果背景和边框宽度都有的话, 将box设为1
      openBox();
    }
  } else if (restsState.value.openType == "bordercolor") {
    Global_tts_config.value.preset_styles_config.bordercolor = e.hex;
    if (Global_tts_config.value.preset_styles_config.type != 0) {
      Global_tts_config.value.preset_styles_config.bordercolor = e.hex;
      // 如果背景和边框宽度都有的话, 将box设为1
      openBox();
    }
  }
  setStore(Global_tts_config.value);
};

// 修改所有的项的x轴数据, 触发函数
const changeAllX = () => {
  const element = document.querySelector(".editor_content");
  // 测量不同文本信息的宽度

  Global_tts_config_configs.value.configs.forEach((ele) => {
    // 编辑的是此项
    if (ele.tts_id == globalTtsCurrent_id.value) {
      ele.subtitle.forEach((i) => {
        // 获取此项的文本宽度
        const fontSize = parseFloat(getComputedStyle(element)["font-size"]);

        // 获取此项的文本宽度
        const newTextWidth = getTextWidthUsingCanvas(
          i.text,
          fontSize,
          i.font_family
        );

        // 修改此项的x轴数据
        i.x = i.showX - newTextWidth / 2;
        console.log(i.x, "获取此项的文本宽度---全局");
      });
    }
  });
  // 修改x数据之后 重新初始化数据
  store.commit(
    "videoMixCut/INIT_GLOBALTTSCONFIG_DATA",
    Global_tts_config_configs.value
  );
};

const fontSizeChange = (type) => {
  if (type == "lessen") {
    if (Global_tts_config.value.font_size > 1) {
      Global_tts_config.value.font_size--;
      setStore(Global_tts_config.value);
      nextTick(() => {
        changeAllX();
      });
    }
  } else {
    Global_tts_config.value.font_size < 999 &&
      Global_tts_config.value.font_size++;
    setStore(Global_tts_config.value);
    nextTick(() => {
      changeAllX();
    });
  }
};

// 字体input失去焦点
const inputBlur = () => {
  !Global_tts_config.value.font_size &&
    (Global_tts_config.value.font_size = 16);
  setStore(Global_tts_config.value);
};

// 修改字体粗细
const changeBold = () => {
  Global_tts_config.value.bold == 1
    ? (Global_tts_config.value.bold = 0)
    : (Global_tts_config.value.bold = 1);
  setStore(Global_tts_config.value);
};

// 修改字体倾斜
const changeItalic = () => {
  Global_tts_config.value.italic == 1
    ? (Global_tts_config.value.italic = 0)
    : (Global_tts_config.value.italic = 1);
  setStore(Global_tts_config.value);
};

// 清除选择的背景色
const clearBgc = () => {
  Global_tts_config.value.bg_color = "";
  if (Global_tts_config.value.preset_styles_config.type != 0) {
    Global_tts_config.value.preset_styles_config.boxcolor = "";
    // 如果背景色和背景宽度都没有的话, 将box改为0
    openBox();
  }
  setStore(Global_tts_config.value);
};

// 清除描边颜色
const clearBordercolor = () => {
  Global_tts_config.value.preset_styles_config.bordercolor = "";
  setStore(Global_tts_config.value);
};

// 切换面板背景设置和描边设置面板
const outlineChange = (key) => {
  key.length &&
    (() => {
      outline.value = key.find((ele) => ele != "");
    })();
};
const collapseKeyBgcChange = (key) => {
  key.length &&
    (() => {
      collapseKeyBgc.value = key.find((ele) => ele != "");
    })();
};

// 判断是否开启box 属性
const openBox = () => {
  if (
    Global_tts_config.value.preset_styles_config.boxborderw ||
    (Global_tts_config.value.preset_styles_config.boxcolor &&
      Global_tts_config.value.preset_styles_config.box != 1)
  ) {
    Global_tts_config.value.preset_styles_config.box = 1;
  } else if (
    !Global_tts_config.value.preset_styles_config.boxborderw &&
    !Global_tts_config.value.preset_styles_config.boxcolor &&
    Global_tts_config.value.preset_styles_config.box == 1
  ) {
    Global_tts_config.value.preset_styles_config.box = 0;
  }
  console.log(
    Global_tts_config.value.preset_styles_config.box,
    "Global_tts_config.value.preset_styles_config.boxsubTitle.value.preset_styles_config.box"
  );
};

const tabChange = (e) => {
  console.log(e, 'tab栏位改变了');
  console.log(FlowerDefaultArr.value,'花字值');
  
  // 清空随机的花字
  Global_tts_config_configs.value.flower_random_config.flower_config_ids = []

  // 切换的时候 根据类型, 赋值初始数据
  if (e == 'system') {
    Global_tts_config.value.flower_id = FlowerDefaultArr.value?.tts?.id
    Global_tts_config.value.preset_styles_config = JSON.parse(JSON.stringify(FlowerDefaultArr.value?.tts))
    setStore()
  } else {
    clear_tts_config()
    const id = FlowerDefault_Aly.value?.id
    Global_tts_config.value.flower_id = id
    Global_tts_config.value.preset_styles_config.id = id
    setStore()
  }
}

defineExpose({});
</script>

<template>
  <!-- 花字设置 -->
  <div class="font_settings_content">
    <div class="title">
      <span>字幕设置</span>
      <a-switch v-model:checked="showSubtitle" size="small" />
    </div>
    <!-- 字幕设置 -->
    <div class="font_setting" v-show="showSubtitle">
      <!-- 字体设置 -->
      <div class="font_setting_item">
        <span class="font_setting_item_title">字体设置</span>
        <div class="font_setting_box">
          <!-- 选择字体 -->
          <a-popover placement="bottom" trigger="click" v-model:visible="selectFontPop" :getPopupContainer="(triggerNode) => {
            return triggerNode.closest('.font_setting_box');
          }
            ">
            <template #content>
              <!-- :class="{selectFontType == item ? 'font_active' : ''}" -->
              <div class="select_font_box">
                <div class="select_font_item" @click="selectFontcomputed = item.id" :style="{
                  fontFamily: item.font_family,
                }" :class="{ font_active: selectFontcomputed?.id == item.id }" v-for="item in fontList" :key="item.id">
                  {{ item.name }}
                  <CheckOutlined v-show="selectFontcomputed?.id == item.id" style="font-size: 16px" />
                </div>
              </div>
            </template>
            <div class="font_settings_style">
              <span>{{ selectFontcomputed?.name }}</span>
              <CaretDownOutlined></CaretDownOutlined>
            </div>
          </a-popover>

          <!-- 设置字体大小 -->
          <div class="font_settings_size">
            <div class="change_btn" @click="fontSizeChange('lessen')">
              <MinusOutlined />
            </div>
            <a-input-number id="inputNumber" @blur="inputBlur" :controls="false" v-model:value="font_size" :min="1"
              :defaultValue="16" :max="999">
            </a-input-number>
            <div class="change_btn" @click="fontSizeChange('add')">
              <PlusOutlined />
            </div>
          </div>
          <!-- 分割线 -->
          <div class="split_line"></div>
          <!-- 设置字体颜色 -->
          <div class="color_settings_box">
            <a-tooltip placement="bottom">
              <template #title>
                <span>字体颜色</span>
              </template>
              <div class="settings_color" @click="colorPickerClick('font', $event)">
                <cu-icon type="icon-a"></cu-icon>
                <div class="color_line" :style="{
                  background: Global_tts_config.color || 'transparent',
                }"></div>
              </div>
            </a-tooltip>
            <!-- 设置背景颜色 -->
            <a-tooltip placement="top">
              <template #title>
                <span>背景颜色</span>
              </template>
              <div class="settings_color" @click="colorPickerClick('bgc', $event)">
                <!-- 删除按钮 -->
                <cu-icon type="icon-shanchu2-copy" class="del_bgc" v-show="!!Global_tts_config.bg_color"
                  @click.stop="clearBgc"></cu-icon>
                <cu-icon style="font-size: 14px" type="icon-yansekuai"></cu-icon>
                <div class="color_line" :style="{
                  background: Global_tts_config.bg_color || 'transparent',
                }"></div>
              </div>
            </a-tooltip>
            <!-- 设置颜色的元素本体 -->
          </div>
          <!-- 分割线 -->
          <div class="split_line"></div>

          <!-- 字体粗细倾斜和排列方式 -->
          <div class="font_settings_style_control">
            <div class="font_settings_style_itme" :class="{ is_active: Global_tts_config.bold == 1 }"
              @click="changeBold">
              <cu-icon type="icon-B"></cu-icon>
            </div>
            <div @click="changeItalic" :class="{ is_active: Global_tts_config.italic == 1 }"
              class="font_settings_style_itme">
              <cu-icon type="icon-T-qingxie"></cu-icon>
            </div>
            <!-- 对齐方式 -->
            <a-tooltip placement="top">
              <template #title>
                <span>对齐方式</span>
              </template>
              <a-popover placement="bottom" trigger="click" :getPopupContainer="(triggerNode) => {
                return triggerNode.closest('.font_settings_style_control');
              }
                ">
                <template #content>
                  <div class="select_alignment">
                    <span :class="{
                      active_alignment:
                        restsState.alignmentType.type == i.type,
                    }" v-for="i in alignmentArr" :key="i.id" @click="selectAlignmentPop(i)">
                      <cu-icon :type="i.icon"></cu-icon>
                    </span>
                  </div>
                </template>
                <div class="font_settings_style_itme alignment">
                  <cu-icon :type="restsState.alignmentType.icon" style="color: #333; margin-right: 15px"></cu-icon>
                  <CaretDownOutlined style="color: #333"></CaretDownOutlined>
                </div>
              </a-popover>
            </a-tooltip>
          </div>

          <!--  -->
        </div>
      </div>

      <color-picker id="colorPicker" modebar="none" :show-opacity="false" @change="colorChange" :btn-style="{
        width: '60px',
        height: '32px',
        marginLeft: 'auto',
        display: 'none',
      }" />

    <!-- 花字开启随机 -->
    <div class="font_setting_item" style="margin-top: 10px">
      <span class="font_style_title">花字随机</span>
      <a-switch v-model:checked="isRandom" checked-children="开" un-checked-children="关"/>
      <QuestionCircleOutlined style="margin-left: 20px; color: #333;"/>
      <span style="color: #333;transform: translateY(1px);">&nbsp;开启随机花字，则显示效果以实际生成为准</span>
      </div>
      <!-- 推荐花字提示 -->
      <div class="font_setting_item" style="transform: translateY(15px)" v-show="flower_type == 'effectColor'">
        <span class="font_style_title" style="color: #8d002a;">
        <QuestionCircleOutlined style="color: #333; transform: translateY(2px); margin-right: 3px;" />
        选择 <span style="font-weight: bold;">&nbsp;推荐花字</span>，不支持左边效果预览，最终效果以生成结果为准</span>
      </div>
      <!-- 花字设置 -->
      <div class="font_setting_item" style="margin-top: 20px">
        <span class="font_style_title">花字设置</span>
        <a-tabs v-model:activeKey="flower_type" @change="tabChange">

          <a-tab-pane key="effectColor" tab="推荐花字">
            <div class="font_style_box">
          <div class="font_style_content_box" :class="{ active_height: isFlod == false }">
            <!-- 可选项 -->
            <div @click="selectFontStyle(i)" class="font_style_content_item" :style="{
              background: i.boxcolor || '#e2e2e2',
            }" :class="{ active_font_style: (!isRandom &&  activeFlowerName == i.id) || getActiveFn(i) }" 
            v-for="i in FlowerAliArr" :key="i.id">
            <img class="font_img" :src="i.image" alt="" style="width: 200px; height: 51px; object-fit: contain;">
              <!-- <img :src="i.image" alt="" style="width: 51px; object-fit: cover;"> -->
            </div>
          </div>
          <!-- 折叠 -->
          <div class="folding_panel" @click="foldingPanel" v-if="FlowerArr?.length > 20">
            <span>{{ isFlod ? "收起更多" : "展开更多" }}</span>
            <CaretDownOutlined v-if="!isFlod" />
            <caret-up-outlined v-else />
          </div>
        </div>
          </a-tab-pane>
          <a-tab-pane key="system" tab="系统花字" force-render>
            <div class="font_style_box">
          <div class="font_style_content_box" :class="{ active_height: isFlod == false }">
            <!-- 禁用选项 -->
            <div @click="selectFontStyle('')" class="font_style_content_item font_disabled"
              :class="{ active_font_style: activeFlowerName == '' && !isRandom }">
              <cu-icon type="icon-jinyong"></cu-icon>
            </div>
            <!-- 可选项 -->
            <div @click="selectFontStyle(i)" class="font_style_content_item" :style="{
              background: i.boxcolor || '#e2e2e2',
            }" :class="{ active_font_style: (!isRandom &&  activeFlowerName == i.id) || getActiveFn(i) }" v-for="i in FlowerArr" :key="i.id">
              <p class="font_style_content_item_text" :style="getStyle(i)">
                花字
              </p>
              <!-- <img :src="i.image" alt="" style="width: 51px; object-fit: cover;"> -->
            </div>
          </div>
          <!-- 折叠 -->
          <div class="folding_panel" @click="foldingPanel" v-if="FlowerArr?.length > 20">
            <span>{{ isFlod ? "收起更多" : "展开更多" }}</span>
            <CaretDownOutlined v-if="!isFlod" />
            <caret-up-outlined v-else />
          </div>
        </div>
          </a-tab-pane>
        </a-tabs>
        

      </div>

      <!-- 背景设置 -->
      <a-collapse @change="collapseKeyBgcChange" v-model:activeKey="collapseKeyBgc" :expandIcon="() => { }" ghost>
        <a-collapse-panel key="1">
          <template #header>
            <div style="display: flex; align-items: center; gap: 5px">
              <span>背景设置</span>
              <CaretDownOutlined v-show="collapseKeyBgc != 1" class="downOutlined"></CaretDownOutlined>

              <CaretUpOutlined class="downOutlined" v-show="collapseKeyBgc == 1"></CaretUpOutlined>
            </div>
          </template>
          <!-- <div class="title">
            <span>混合</span>
          </div> -->
          <!-- 设置的每一个选项 - 字体设置 -->
          <div class="font_setting_item" style="padding: 0">
            <div class="setting_item_box" style="margin-top: 0">
              <!-- 设置背景色 -->
              <div class="setting_item_content_box_">
                <span class="font_setting_item_title">背景颜色</span>
                <div class="setting_content">
                  <a-tooltip placement="top">
                    <template #title>
                      <span>背景颜色:
                        {{
                          Global_tts_config.bg_color
                            ? Global_tts_config.bg_color
                            : "(暂无)"
                        }}</span>
                    </template>
                    <div class="settings_color" @click="colorPickerClick('bgc', $event)">
                      <!-- 删除按钮 -->
                      <div class="color_line" :style="{
                        background:
                          Global_tts_config.bg_color || 'transparent',
                      }"></div>
                      <CaretDownOutlined class="downOutlined"></CaretDownOutlined>
                      <cu-icon type="icon-shanchu2-copy" class="del_bgc" style="top: -12px; right: -17px"
                        @click.stop="clearBgc" v-show="Global_tts_config.bg_color"></cu-icon>
                    </div>
                  </a-tooltip>
                </div>
              </div>

              <!-- 透明度 -->
              <div class="setting_item_content_box_">
                <span class="font_setting_item_title">不透明度</span>
                <div class="setting_content">
                  <div class="slider_box">
                    <!-- 没有设置背景色 则禁用透明度选项 -->
                    <template v-if="Global_tts_config.bg_color">
                      <a-slider :step="0.1" :tip-formatter="(val) => val" :max="1" :mix="0"
                        v-model:value="box_color_alpha" class="slider" />
                    </template>
                    <template v-else>
                      <a-tooltip placement="top">
                        <template #title>
                          <span>请先设置背景色</span>
                        </template>
                        <div>
                          <a-slider :step="0.1" :tip-formatter="(val) => val" :max="1" :mix="0"
                            v-model:value="box_color_alpha" class="slider" :disabled="true" />
                        </div>
                      </a-tooltip>
                    </template>
                  </div>
                </div>
              </div>

              <!-- 背景大小 -->
              <div class="setting_item_content_box_">
                <span class="font_setting_item_title">背景大小</span>
                <div class="setting_content">
                  <div class="slider_box">
                    <template v-if="Global_tts_config.bg_color">
                      <a-slider :tip-formatter="(val) => val" :max="100" :mix="0" v-model:value="boxborderw"
                        class="slider" />
                    </template>
                    <template v-else>
                      <a-tooltip placement="top">
                        <template #title>
                          <span>请先设置背景色</span>
                        </template>
                        <div>
                          <a-slider :tip-formatter="(val) => val" :max="100" :mix="0" v-model:value="boxborderw"
                            class="slider" :disabled="true" />
                        </div>
                      </a-tooltip>
                    </template>
                  </div>
                </div>
              </div>

              <!-- 圆角半径 -->
              <div class="setting_item_content_box_">
                <span class="font_setting_item_title">圆角半径</span>
                <div class="setting_content">
                  <div class="slider_box">
                    <template v-if="Global_tts_config.bg_color">
                      <a-slider :tip-formatter="(val) => val" :max="100" :mix="0" v-model:value="boxradius"
                        class="slider" />
                    </template>
                    <template v-else>
                      <a-tooltip placement="top">
                        <template #title>
                          <span>请先设置背景色</span>
                        </template>
                        <div>
                          <a-slider :tip-formatter="(val) => val" :max="100" :mix="0" v-model:value="boxradius"
                            class="slider" :disabled="true" />
                        </div>
                      </a-tooltip>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>

      <!-- 描边设置 -->
      <a-collapse @change="outlineChange" v-model:activeKey="outline" :expandIcon="() => { }" ghost>
        <a-collapse-panel key="1">
          <template #header>
            <div style="display: flex; align-items: center; gap: 5px">
              <span>描边设置</span>
              <CaretDownOutlined class="downOutlined" v-show="outline != 1"></CaretDownOutlined>
              <CaretUpOutlined class="downOutlined" v-show="outline == 1"></CaretUpOutlined>
            </div>
          </template>
          <!-- 设置的每一个选项 - 字体设置 -->
          <div class="font_setting_item" style="padding: 0">
            <div class="setting_item_box" style="margin-top: 0">
              <div class="setting_item_content_box_">
                <span class="font_setting_item_title">描边颜色</span>
                <div class="setting_content">
                  <a-tooltip placement="top">
                    <template #title>
                      <span>描边颜色:
                        {{
                          Global_tts_config.preset_styles_config.bordercolor
                            ? Global_tts_config.preset_styles_config.bordercolor
                            : "(暂无)"
                        }}</span>
                    </template>
                    <div class="settings_color" @click="colorPickerClick('bordercolor', $event)">
                      <div class="color_line" :style="{
                        background:
                          Global_tts_config.preset_styles_config
                            .bordercolor || 'transparent',
                      }"></div>
                      <CaretDownOutlined class="downOutlined"></CaretDownOutlined>
                      <cu-icon type="icon-shanchu2-copy" class="del_bgc" style="top: -12px; right: -17px"
                        @click.stop="clearBordercolor" v-show="Global_tts_config.preset_styles_config.bordercolor
                          "></cu-icon>
                    </div>
                  </a-tooltip>
                </div>
              </div>

              <div class="setting_item_content_box_">
                <span class="font_setting_item_title">描边粗细</span>
                <div class="setting_content">
                  <!-- 透明度 -->
                  <div class="slider_box">
                    <a-slider :tip-formatter="(val) => val" :max="20" :mix="0" v-model:value="borderw" class="slider" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<style lang="less" scoped>
// 小标题字体颜色
@font_color: #42464e;
// 小图标字体大小
@font_size: 13px;
// 静止状态下的背景色
@static_bgc: #f3f3f3;
// hover 背景色
@hover_bgc: #e4e4e4;
// border 的颜色
@border_color: #ccced0;

// 定制 tab的样式
:deep(.ss-tabs-nav-wrap){

  .ss-tabs-nav-list{
    .ss-tabs-tab{
      padding-top: 0;
    }
  }

}

// 定制折叠面板的样式
:deep(.ss-collapse-item) {
  .ss-collapse-header {
    padding: 23px 0 13px 0;
    // mg-top
  }

  .ss-collapse-content-box {
    padding: 0;
  }
}

.font_settings_content {
  border: 1px solid #e8e8e8;
  // overflow: hidden;
  padding: 16px;

  .title {
    display: flex;
    justify-content: space-between;

    span {
      font-size: 13px;
      font-weight: 600;
      color: #1e1c23;
    }
  }

  // 字体样式设置
  .font_setting {
    margin-top: 10px;

    .font_setting_item {
      display: flex;
      position: relative;
      align-items: center;

      // 标题
      .font_setting_item_title {
        color: @font_color;
        font-size: 13px;
        padding-right: 15px;
        // padding-top: 10px;
        min-width: 67px;
      }

      // 时间设置标题
      .font_style_title {
        color: @font_color;
        font-size: 13px;
        padding-right: 15px;
        display: flex;
        // justify-content: start;
        align-self: flex-start;
        // 一行显示
        white-space: nowrap;
      }

      // 花字设置
      .font_style_box {

        // display: flex;
        .font_style_content_box {
          overflow-y: auto;
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          overflow: hidden;

          .font_style_content_item {
            border: 2px solid #ededee;
            cursor: pointer;
            border-radius: 8px;
            overflow: hidden;

            &:hover {
              border-color: #1664ff;
              background-color: #e8f7ff;
            }

            .font_style_content_item_text {
              width: 51px;
              font-size: 20px;
              line-height: 51px;
              text-align: center;
              margin: 0;
              font-weight: 900;
            }
          }

          .active_font_style {
            border-color: #1664ff;
          }

          // 禁用
          .font_disabled {
            width: 51px;
            font-size: 32px;
            text-align: center;
          }
        }

        // 折叠按钮
        .folding_panel {
          color: #737a87;
          text-align: center;
          width: 100%;
          display: block;
          cursor: pointer;
          margin-top: 15px;
        }
      }

      // 字体设置
      .font_setting_box {
        flex: 1;
        max-width: 550px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: #f6f8fa;
        overflow-x: auto;
        overflow-y: hidden;

        &::-webkit-scrollbar {
          height: 4px;
          /* 滚动条的高度，垂直滚动条可能用得上 */
        }

        &::-webkit-scrollbar-thumb {
          background: #888;
          /* 滑块的背景颜色 */
          border-radius: 10px;
          /* 滑块的圆角 */
        }

        // 选择字体气泡框
        :deep(.ant-popover-inner-content) {
          padding: 0px;
        }

        // 字体大小数字input
        :deep(.ant-input-number) {
          background-color: transparent;
          border: none;
          width: 56px;
        }

        :deep(.ant-input-number-input) {
          text-align: center;
        }

        :deep(.zs-color-picker-panel) {
          margin-top: 16px;
          left: 0px;
        }

        .select_font_box {
          display: flex;
          flex-direction: column;
          height: 400px;
          overflow-y: auto;
          padding-right: 4px;

          &:hover {
            padding-right: 0;

            &::-webkit-scrollbar {
              display: block;
            }
          }

          &::-webkit-scrollbar {
            width: 4px;
            /* 滚动条的宽度 */
            height: 10px;
            /* 滚动条的高度，垂直滚动条可能用得上 */
            display: none;
          }

          &::-webkit-scrollbar-thumb {
            background: #888;
            /* 滑块的背景颜色 */
            border-radius: 10px;
            /* 滑块的圆角 */
          }

          .select_font_item {
            padding: 8px 16px;
            cursor: pointer;
            min-width: 157px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &:hover {
              background-color: #eeefef;
            }
          }

          .font_active {
            font-weight: 600;
          }
        }

        .font_settings_style {
          cursor: pointer;
          color: #0c0d0e;
          margin: 0 5px;
          padding: 3px;
          display: flex;
          align-items: center;

          span {
            max-width: 70px;
            margin-right: 5px;
            font-size: 13px;
            // 不换行
            white-space: nowrap;
            // 省略号
            overflow: hidden;
            text-overflow: ellipsis;
          }

          &:hover {
            background-color: #eeefef;
          }
        }

        // 字体大小
        .font_settings_size {
          margin: 0 5px;
          height: 40px;
          line-height: 40px;
          display: flex;
          align-items: center;

          &:hover {
            background-color: #eeefef;
          }

          .change_btn {
            cursor: pointer;
            padding: 0 10px;
            color: @font_color;
            -webkit-user-select: none;
            /* Safari, Chrome 和 Opera */
            -moz-user-select: none;
            /* Firefox */
            -ms-user-select: none;
            /* Internet Explorer/Edge */
            user-select: none;
            /* 非前缀的版本, 应用于所有现代浏览器 */
          }
        }

        // 分割线
        .split_line {
          margin: 0 10px;
          height: 20px;
          width: 1px;
          background-color: #e2e2e2;
        }

        // 字体颜色和背景色
        .color_settings_box {
          display: flex;
          gap: 7px;

          .settings_color {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 7px 7px;
            position: relative;
            border-radius: 5px;
            // overflow: hidden;

            &:hover {
              background-color: #eeefef;
              cursor: pointer;

              & .del_bgc {
                opacity: 1;
              }
            }

            .del_bgc {
              position: absolute;
              top: -5px;
              right: -5px;
              font-size: 22px;
              opacity: 0;
              color: #333333;

              &:hover {
                color: red;
              }
            }

            .color_line {
              height: 2px;
              width: 60%;
              background-color: #000;
              position: absolute;
              bottom: 0px;
              left: calc(50% - 30%);
            }
          }

          .disable_settings_color {
            filter: grayscale(80%);

            .color_line {
              background: #ccced0 !important;
            }
          }
        }

        // 字体粗细倾斜和排列方式
        .font_settings_style_control {
          display: flex;
          align-items: center;
          gap: 10px;

          // 设置气泡框样式
          :deep(.ant-popover-inner-content) {
            padding: 0px;
          }

          .select_alignment {
            display: flex;

            span {
              padding: 5px;
              cursor: pointer;

              &:hover {
                background-color: #eeefef;
              }
            }

            .active_alignment {
              background-color: #eeefef;
            }
          }

          .font_settings_style_itme {
            padding: 2px 7px;
            cursor: pointer;
            border-radius: 5px;
            overflow: hidden;

            &:hover {
              background-color: #eeefef;
            }
          }

          .is_active {
            background-color: #d8e7fc !important;
          }

          .alignment {
            display: flex;
            padding: 4px;
          }
        }
      }

      // 配音设置
      .setting_time {
        // 去除input默认样式
        border: 1px solid #e2e2e2;
        display: flex;
        align-items: center;

        :deep(.ant-input-number-group-addon) {
          border: none;
          background-color: transparent;
          // padding: 3px 6px;
          // display: flex;
          // align-items: center;
          // justify-content: center;
        }

        :deep(.ant-input-number-input) {
          border: none;
        }

        :deep(.ant-input-number) {
          border: none;

          &:hover {
            border: none;
          }
        }

        :deep(.ant-input-number-focused) {
          box-shadow: none;
        }

        :deep(.ant-input-number-handler) {
          border-right: 1px solid #d9d9d9;
        }
      }

      // 聚焦的样式
      .focus_input {
        border-color: #1890ff;
      }

      // 音色选择卡片
      .timbre_selection {
        width: 284px;
        border-radius: 4px;
        background: rgb(246, 248, 250);
        border: 1px solid rgba(0, 0, 0, 0.05);
        padding: 12px;
        display: flex;
        justify-content: space-between;

        .timbre_selection_cart_left {
          display: flex;
          align-items: center;

          img {
            width: 37px;
            margin-right: 12px;
          }

          strong {
            color: @font_color;
          }
        }

        .timbre_selection_cart_right {
          display: flex;
          align-items: center;
          justify-content: center;
          color: @font_color;
          font-size: 17px;
          cursor: pointer;
          width: 38px;

          &:hover {
            background-color: #eeefef;
          }
        }
      }

      // 音量调整
      .volume_adjust {
        width: 254px;
      }

      // 文本设置的每一项
      .setting_item_box {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 26px;

        .setting_item_content_box_ {
          display: flex;
          align-items: center;

          // 功能的主体容器
          .setting_content {

            // 透明度
            .slider_box {
              width: 249px;
            }

            // 字体颜色
            .settings_color {
              // height: 20px;
              position: relative;
              border-radius: 5px;
              // overflow: hidden;
              width: 100px;
              display: flex;
              border: 1px solid @border_color;
              // overflow: hidden;

              .downOutlined {
                background: @static_bgc;
                // padding-top: 1px;
                display: flex;
                align-items: center;
              }

              &:hover {
                cursor: pointer;

                & .del_bgc {
                  opacity: 1;
                }

                & .downOutlined {
                  background-color: @hover_bgc;
                }
              }

              .del_bgc {
                position: absolute;
                top: -5px;
                right: -5px;
                font-size: 22px;
                opacity: 0;

                &:hover {
                  color: red;
                }
              }

              .color_line {
                width: 90%;
                height: 20px;
                // position: absolute;
                // left: 0;
                // top: 50%;
                // transform: translateY(-50%);
                background-color: #000;
              }
            }
          }
        }

        // 字体设置
        .font_setting_box {
          flex: 1;
          max-width: 550px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          background-color: #f6f8fa;
          overflow-x: auto;
          overflow-y: hidden;

          &::-webkit-scrollbar {
            height: 4px;
            /* 滚动条的高度，垂直滚动条可能用得上 */
          }

          &::-webkit-scrollbar-thumb {
            background: #888;
            /* 滑块的背景颜色 */
            border-radius: 10px;
            /* 滑块的圆角 */
          }
        }

        // 分割线
        .split_line {
          margin: 0 10px;
          height: 20px;
          width: 1px;
          background-color: #e2e2e2;
        }

        // 字体颜色和背景色
        .color_settings_box {
          display: flex;
          gap: 7px;

          .settings_color {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 7px 7px;
            position: relative;
            border-radius: 5px;
            overflow: hidden;

            &:hover {
              background-color: #eeefef;
              cursor: pointer;

              & .del_bgc {
                opacity: 1;
              }
            }

            .del_bgc {
              position: absolute;
              top: -5px;
              right: -5px;
              font-size: 22px;
              opacity: 0;

              &:hover {
                color: red;
              }
            }

            .color_line {
              height: 2px;
              width: 60%;
              background-color: #000;
              position: absolute;
              bottom: 0px;
              left: calc(50% - 30%);
            }
          }

          .disable_settings_color {
            filter: grayscale(80%);

            .color_line {
              background: #ccced0 !important;
            }
          }
        }

        // 字体粗细倾斜和排列方式
        .font_settings_style_control {
          display: flex;
          align-items: center;
          gap: 10px;

          // 设置气泡框样式
          :deep(.ant-popover-inner-content) {
            padding: 0px;
          }

          .alignment {
            display: flex;
            padding: 4px;
          }
        }
      }
    }
  }
}
</style>
